<template>
  <div class="anchor-station find-music-cpns">
    <swiper :swipers="swipers" imgSrc="pic" v-if="swipers"></swiper>
    <category-nav :cateList="cateList"></category-nav>
    <page-content v-bind="allData"></page-content>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Swiper from '@/base-ui/swiper'
import CategoryNav from '@/components/page-find-music/page-anchor-station/category-nav-icon'
import PageContent from '@/components/page-find-music/page-anchor-station/page-content'

import { InitGetData } from '../hook/anchor-station'

export default defineComponent({
  components: {
    Swiper,
    CategoryNav,
    PageContent
  },
  setup() {
    const [
      swipers,
      cateList,
      recommends,
      recommend,
      pays,
      creations,
      electrs,
      musicStory,
      emotion,
      quadratic
    ] = InitGetData()
    const allData = ref({
      recommends,
      recommend,
      pays,
      creations,
      electrs,
      musicStory,
      emotion,
      quadratic
    })
    return {
      swipers,
      cateList,
      allData
    }
  }
})
</script>

<style scoped lang="less">
.anchor-station {
  width: 95%;
}
</style>
